<template>
	<div id="app">
		<div v-if="check">
			<div style="padding: 5% 3% 0;"><icon name="warn" scale="2"></icon><span style="margin-left: 3%;">认证信息已成功提交，我们将急速为您审核！</span></div>
			<div style="margin-left: 10%; auto;font-size: 18px;padding-top: 15%;">您的认证信息:</div>
			<div style="font-size: 18px;"><span style="margin-left: 15vw;">姓名:</span><span style="margin-left: 25vw;color: gray;">{{student_name}}</span></div>
			<div style="font-size: 18px;"><span style="margin-left: 15vw;">学校:</span><span style="margin-left: 25vw;color: gray;">{{student_school}}</span></div>
			<div style="margin-left: 15vw;font-size: 18px;">认证凭证:<img :src="userInfo.avatar" style="max-width: 80%;height: 40%;" /></div>
			<div style="height: 5vh;"></div>
		</div>

		<div style="width: 90%;margin: 0 auto;" v-if="check_two">
			<div style="padding-top: 5%;">
				<icon name="warn" scale="2"></icon><span style="margin-left: 3%;">填写您的真实数据哦,我们将对您的数据进行审核</span>
				<v-form ref="form" v-model="valid" lazy-validation>
					<v-text-field v-model="student_name" label="真实姓名" validate-on-blur :rules="[rules.requiredName, rules.checkIName]"
						placeholder=""></v-text-field>
					<v-text-field v-model="student_school" :rules="[rules.requiredSchool]" label="所在院校" validate-on-blur placeholder=""></v-text-field>
					<v-file-input v-model="files" :rules="[rules.student_voucher]" accept="image/png, image/jpeg, image/bmp"
						validate-on-blur prepend-icon="mdi-camera" label="认证图片" @change="handleFile"></v-file-input>

					<v-btn block color="#FF5252" :disabled="!valid" class="mr-4" @click="validate" style="font-size: 17px;color:white;	position: fixed;
					bottom: 0;left:0">
						提交认证
					</v-btn>
				</v-form>
			</div>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: "StudentAuth",
		data() {
			return {
				student_name: '',
				student_school: '',
				check: false,
				check_two: false,
				valid: true,
				snackbar:'',
				message:'',
				timeout:2000,
				rules: {
					requiredName: value => !!value || "请输入真实姓名",
					requiredSchool: value => !!value || "请输入所在院校",
					checkIName: value => {
						const pattern = /^([\u4e00-\u9fa5]){2,7}$/;
						return pattern.test(value) || "真实姓名格式错误";
					},
					student_voucher: value => !value || value.size < 2000000 || '图片的大小小于2MB！',
				},
				userInfo: {
					avatar: ''
				},
				files: [],
			}
		},
		methods: {
			handleFile() {
				let data = new FormData()
				data.append('image_file', this.files)
				let _this = this;
				axios
					.post("/api/v1.0/users/avatar", data, {
						headers: {
							'Content-Type': 'multipart/form-data',
						},
					})
					.then(function(response) {
						if (response.data.errno === '0') {
							// 保存头像到七牛云成功提示信息
							_this.userInfo.avatar = response.data.data.image_url
							console.log(_this.userInfo.avatar)
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							console.log(0)
							_this.goLogin()

						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			validate() {
				if (this.$refs.form.validate()) {
					let _this = this;
					axios
						.post("/api/v1.0/users/auth_student", {
							real_name: _this.student_name,
							school: _this.student_school,
							student_voucher_url: _this.userInfo.avatar
						}).then(function(response) {
							if (response.data.errno === '0') {
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									location.reload()
								}, 1000);
								console.log(response.data.data)
							} else if (response.data.errno === '4101') {
								// 未登跳转到登录页面
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									_this.$router.replace({
										path: "/login"
									});
								}, 1000);
							} else {
								// 保存失败提示信息
								_this.snackbar = true;
								_this.message = '认证失败';
							}
						})
						.catch(function() {
							_this.message = "连接服务器失败！";
						});
				}
			},
			reset() {
				this.$refs.form.reset()
			},
			resetValidation() {
				this.$refs.form.resetValidation()
			},
			// goStudentAuth(){
			// 	this.$router.push({
			// 		path: '/mine/identity/check_student_auth'
			// 	});
			// }
		},
		mounted() {
			let _this = this;
			console.log(_this.check_two)
			axios
				.get("/api/v1.0/user/auth_student")
				.then(function(response) {
					if (response.data.errno === "0") {
						console.log(response.data.data)
						_this.student_name = response.data.data.real_name;
						_this.student_school = response.data.data.school;
						_this.userInfo.avatar = response.data.data.student_voucher_url;
						// 判断是否已经认证
						if (_this.real_name !== '') {
							_this.check = true;
						} else {
							_this.check_two = true;
						}
					} else if (response.data.errno === "4101") {
						// 未登跳转到登录页面
						setTimeout(function() {
							_this.$router.replace({
								path: "/login"
							});
						}, 1000);
					} else if (response.data.errno === "4002") {
						_this.check_two = true;
						console.log(response.data)
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scoped>

</style>
